import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {PlusOutlined} from '@ant-design/icons';
import {Button, Card, Table, Modal, InputNumber, Tabs, message} from 'antd';
import {UseTable,UseSearch} from '../../../components'
import InnovationStudioController from '../../../services/InnovationStudio/InnovationStudioController'
import Members from '../members';
import UpdateStudio from './UpdateStudio'
import StudioDetail from './StudioDetail';
import { getStr } from '@/components/function';

const {confirm} = Modal
class DoneApplyStudioList extends React.Component {
    constructor(props) {
        super(props);
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.state = { 
            userInfo:userInfo,
            dataSource:[],
            selectedRowKeys:[],
            query:{},
            freshen:false

         };
    }
    showNewStudio=()=>this.setState({visibleNewStudio:true})
    showStop=(studioCode)=>{
        confirm({
            title:'确认',
            content:"确定要停运此工作室吗？",
            onOk(){
                console.log('停止了',studioCode)
            }
        })
    }
    showUpdate=(rows)=>{
        this.setState({
            visibleUpdate:true,
            rows,
        })
    }
    submitUpate=()=>{
        this.state.modal.submit()
    }

    applyToJoin=(rowData)=>{
        let that = this
        let {userInfo} = this.state
        let params={
            studioCode:rowData.studioCode,
            name:userInfo.name,
            userName:userInfo.userName
        }
        confirm({
            title:'申请确认',
            content:'确定要申请加入 “'+rowData.studioName+'” 工作室吗？',
            onOk(){
                InnovationStudioController.applyToJoin(params).then(r=>{
                    console.log(r)
                    if(r&&r.data===1){
                        message.success('添加成功')
                        that.freshen()
                    }
                    else{
                        message.success('请勿重复操作')
                    }
                })
            }
        })
    }
    showMembers=(rowData)=>{
        this.setState({
            visibleMember:true,
            rowData
        })
    }
    getList=(query)=>{
        let {userInfo} = this.state
        query.userName = userInfo.userName
        if(query.isLeaderSelect!=='全部'){
            query.isLeader = query.isLeaderSelect
        }
       return InnovationStudioController.getMembersPage(query)
    }
    handleSearch=(query)=>{
        this.setState({query})
        this.freshen()
    }
    reset=()=>{
        this.setState({query:{}})
        this.freshen()
    }
    onRef=(ref)=>{
        this.setState({modal:ref})
    }
    onCancel=()=>{
        this.setState({visibleUpdate:false,visibleNewStudio:false,visibleMember:false})
        this.freshen()
    }
    freshen=()=>{
        this.setState({freshen:!this.state.freshen})
    }
    tabChange=(e)=>{
        this.setState({tabKey:e})
    }
    showMenbers=(rows)=>{
        this.setState({
            visibleMember:true,
            rows
        })
    }
    showDetail=(rows)=>{
        this.setState({
            visibleDetail:true,
            rows
        })
    }

    render() {
        const {visibleMember,query,rows,visibleDetail,freshen,visibleUpdate}=this.state
        const columns=[
            {title:'工作室名称',dataIndex:'studioName',align:'center'},
            // {title:'申请人',dataIndex:'name',align:'center'},
            {title:'加入时间',dataIndex:'createdAt',align:'center'},
            {title:'是否为领导',dataIndex:'isLeader',align:'center',render:text=>text==='是'?'是':'否'},
            {title:'审批状态',dataIndex:'reviewStatus',align:'center'},
            {title:'审批人',dataIndex:'reviewName',align:'center'},
            {title:'审批时间',dataIndex:'reviewTime',align:'center'},
            {title:'审批备注',dataIndex:'reviewRemark',align:'center',render:text=>getStr(text)},
            {title:'操作',align:'center',render:(text,rows)=><div>
                {rows.isLeader==='是'&&<Button onClick={this.showMenbers.bind(this,rows)} type='primary' style={{margin:5}}>成员管理</Button>}
                {rows.isLeader==='是'&&<Button onClick={this.showUpdate.bind(this,rows)} type='primary' style={{margin:5}}>修改</Button>}
                <Button onClick={this.showDetail.bind(this,rows)} type='primary' style={{margin:5}}>工作室详情</Button>
            </div>},
        ]
        const searchItem=[
            {name:'工作室名称',keyName:'studioName',valueType:'text'},
            {name:'是否为领导',keyName:'isLeaderSelect',valueType:'select',selectDatas:[{code:'是',name:'是'},{code:'否',name:'否'},{code:'全部',name:'全部'}]},
            {name:'审核结果',keyName:'reviewStatus',valueType:'select',selectDatas:[{code:'待审批',name:'待审批'},{code:'同意',name:'同意'},{code:'不同意',name:'不同意'}]},
        ]
        return (      
                <div>      
                <Card>
                    <UseSearch searchItem={searchItem} handleSearch={this.handleSearch} reset={this.reset}
                    />                                                                                                              
                </Card>
                <Card style={{marginTop:10}}>                    
                    <UseTable getData={this.getList} columns={columns} rowKey={'id'} query={query} refresh={freshen} /> 
                </Card>
                
                <Modal
                title={'工作室成员'}
                visible={visibleMember}
                footer={false}
                onCancel={()=>this.setState({visibleMember:false})}
                width={'80%'}
                >
                    {visibleMember&&<Members rows={rows} onCancel={this.onCancel}/>}
                </Modal>
                <Modal
                visible={visibleDetail}
                footer={false}
                width={'80%'}
                onCancel={()=>this.setState({visibleDetail:false})}
                >
                  {visibleDetail&&<StudioDetail childData={rows}/>}
                </Modal>
                <Modal
                title={'修改工作室信息'}
                visible={visibleUpdate}
                onOk={this.submitUpate}
                onCancel={this.onCancel}
                width={700}
                >
                    {visibleUpdate&&<UpdateStudio rows={rows} onCancel={this.onCancel} onRef={this.onRef}/>}
                </Modal>
                </div>
        );
    }
} 

export default DoneApplyStudioList;